<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /*   设置表的样式 */
    .clock {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        margin-top: 100px;
        border-radius: 50%;
        border: 10px solid black;
        position: relative;
        background-image: url('./img/time.jpg');
        /* 将背景图片铺满 */
        background-size: cover;
    }

    .clock > div{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
    /* 设置时针 */
    .hour-wrapper {
        
        height: 70%;
        width: 70%;
        animation: run 3600s linear infinite;
        /* background-color: #bfa; */
    }

    .hour {
        height: 50%;
        width: 6px;
        background-color: rgb(0, 0, 0);
        margin: 0 auto;
    }
    /* 设置分针 */
    .min-wrapper {
        height: 80%;
        width: 80%;
        animation: run 60s steps(60) infinite;
        /* background-color: rgb(170, 224, 255); */
    }
    .min {
        height: 50%;
        width: 4px;
        background-color: rgb(0, 0, 0);
        margin: 0 auto;
    }

/* 设置秒针 */
.miao-wrapper {
        height: 95%;
        width: 95%;
        animation: run 1s steps(60) infinite;
        /* background-color: rgb(170, 224, 255); */
    }
    .miao {
        height: 50%;
        width: 2px;
        background-color: red;
        margin: 0 auto;
    }
    /*  旋转 */
    @keyframes run {
        from{
transform: rotateZ(0);
        }
        to{
transform: rotateZ(360deg);
        }
    }
</style>

<body>
    <!-- 创建表的容器 -->
    <div class="clock">
        <!-- 创建时针 -->
        <div class="hour-wrapper">
            <div class="hour">
            </div>
        </div>
         <!-- 创建分针 -->
         <div class="min-wrapper">
            <div class="min">
            </div>
        </div>
         <!-- 创建miao针 -->
         <div class="miao-wrapper">
            <div class="miao">
            </div>
        </div>
    </div>
</body>

</html>